<script setup lang="ts">
import useBiliStore from "@/store/modules/useBiliStore";

const biliStore = useBiliStore();
const emit = defineEmits<{
  (e: "update:show", val: boolean): void;
}>();
const setting = biliStore.songPlugin.config;
function onModalEnter() {}
function onModalLeave() {}
async function openSongs() {
  const fs = await window.electronAPI.showOpenDialog({
    filters: [{ name: "Audios(wav,mp3)", extensions: ["wav", "mp3"] }]
  });
  fs?.forEach(v => {
    const arr = [...v.matchAll(/.+(?:\\|\/)(.+?) - (.+?)\.mp3|wav$/g)];
    console.log(arr);
    if (setting.songs.findIndex(s => s.path == v) != -1) return;
    setting.songs.push({
      name: arr[0][2],
      author: arr[0][1],
      path: v
    });
  });
}
</script>

<template>
  <n-modal
    preset="card"
    class="w-150 min-w-100 min-h-100"
    title="点歌姬"
    :on-after-enter="onModalEnter"
    :on-after-leave="onModalLeave"
    @update:show="$emit('update:show', $event)"
  >
    <n-button type="primary" @click="openSongs">导入歌单</n-button>
    <div v-if="setting.songs.length" class="my-2 h-70 overflow-scroll">
      <div
        v-for="(item, idx) in setting.songs"
        :key="idx"
        class="px-4 py-2 mb-1 border-1 border-solid border-gray-200"
      >
        {{ item.author }} - {{ item.name }}
      </div>
    </div>
    <n-empty v-else description="歌单什么也没有"></n-empty>
  </n-modal>
</template>

<style scoped lang="scss"></style>
